<mat-card class="page-title">
    <span>文稿管理</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <input name="search" type="text" class="form-control" placeholder="全文搜索" [(ngModel)]="filter"
               (blur)="refresh()" style="width:200px">
        <span>&nbsp;&nbsp;</span>
        <button mat-icon-button (click)="createArticle()" matTooltip="起草文稿" *ngIf="canCreate()">
            <mat-icon color="primary">add</mat-icon>
        </button>
        <span>&nbsp;&nbsp;</span>
        <button mat-icon-button (click)="refresh()" matTooltip="刷新">
            <mat-icon color="primary">refresh</mat-icon>
        </button>
    </div>
</mat-card>

<mat-card>
    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
                <th jhiSortBy="id"><span>id</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="title"><span>标题</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="authorLogin"><span>作者</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="createdDate"><span>日期</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="subject1"><span>主题1</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="subject2"><span>主题2</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="subject3"><span>主题3</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="tag1"><span>标签1</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="tag2"><span>标签2</span> <span class="fa fa-sort"></span></th>
                <th jhiSortBy="tag3"><span>标签3</span> <span class="fa fa-sort"></span></th>
                <th width="100px">操作</th>
            </tr>
            </thead>
            <tbody *ngIf="articles">
                <tr *ngFor="let article of articles; trackBy: trackIdentity">
                    <td>{{article.id}}</td>
                    <td><a (click)="viewArticle(article)">{{article.title}}</a></td>
                    <td>{{article.authorLogin}}</td>
                    <td>{{article.createdDate | date:'yyyy-MM-dd HH:mm'}}</td>
                    <td>{{article.subject1}}</td>
                    <td>{{article.subject2}}</td>
                    <td>{{article.subject3}}</td>
                    <td>{{article.tag1}}</td>
                    <td>{{article.tag2}}</td>
                    <td>{{article.tag3}}</td>
                    <td width="100px">
                        <a (click)="editArticle(article)" matTooltip="编辑文稿" *ngIf="canEdit(article)">
                            <span class="fa fa-edit" style="color: #673ab7"></span>
                        </a>
                        &nbsp;&nbsp;
                        <a (click)="deleteArticle(article)" matTooltip="删除文稿" *ngIf="canDelete(article)">
                            <span class="fa fa-trash" style="color: red"></span>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <mat-paginator #paginator
                       [length]="totalItems"
                       [pageSize]="itemsPerPage"
                       [pageSizeOptions]="pageSizeOptions"
                       (page)="reloadPage($event)"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</mat-card>
